let path = require('path')

//启用热更新的 第二部
const webpack = require('webpack')

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode:'development', //模式 默认为两种 production development
    entry:'./src/main.js', //入口
    output:{
        filename:'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, './dist'),//路径必须是一个绝对路径
    },
    devServer:{
        open: true,
        contentBase: 'src',
        hot: true
    },
    plugins:[

        //当使用了 html-webpack-plugins 之后 我们不需要手动处理 bundle.js 的引用路径了 因为这个插件 已经帮我们自动创建了合适的并引用了bundle.js 
        //所以在 html 页面中就可以注释掉那个引用的script标签
        new webpack.HotModuleReplacementPlugin() ,
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    // module:{ //这个节点 用于配置第三方模块 加载器
    //     rules:[//所有第三方模块的匹配规则
    //         {   test: /\.css$/, 
    //             use:['style-loader','css-loader'] }
    //         //配置处理.css文件的第三方loader规则
    //     ]
    // }
    module: {
        // 规则
        rules: [
            {
                // 正则匹配所有以.css结尾的文件
                test: /\.css$/,
                // 使用css-loader和style-loader依次对css文件进行处理
                // 按照数组中从后往前的顺序
                use: [ 'style-loader', 'css-loader' ]
            },

            { //这是配置处理 .less文件的第三方 loader 规则
                test: /\.less$/,
                use: [ 'vue-style-loader', 'css-loader', 'less-loader']
            },

            {  //这是配置处理 .scss文件的第三方 loader 规则
                test:/\.scss/,
                use:['style-loader','css-loader','sass-loader']
            },

            {
                test:/\.(jpg|png|bmp|jpeg)$/,
                use:['url-loader?limit=24232'],

                //limit给定的值是图片的大小 单位是byte 如果我们引用的图片 大于或者等于limit的值 则不会转为base64格式的字符串 如果图片小于给定的limit值 则会被转为base64格式的字符串
            },
            // {   test:/\.js$/, 
            //     use:'babel-loader',
            //     exclude:/node_modules/
            // },
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: ['url-loader']
            },
        ]
    },
    resolve:{
        alias:{
            // "vue$": "vue/dist/vue.js"
        }
    }

}



// 当我们在 控制台 输入了 webpack 命令执行的时候 webpack 做了一下几步
// 1. 首先 webpack 发现 我们没有通过命令的形式给他指定入口和出口
// 2. webpack 就会去项目的根木录中 查找一个叫 webpack.config.js 的配置文件
// 3. 找到了之后 就会去执行这个配置文件 当解析完成后 就得到了配置文件中到导出的配置对象
// 4. 当 webpack 拿到了配置对象后 就拿到了指定的入口和出口 然后进行打包构建